<template>
  <el-select :clearable="isClearable" :value="modelValue" @change="change">
    <el-option
      v-for="(item, index) in selectList || []"
      :key="(item[config.valueField] || item.value) + index"
      :label="item[config.labelField] || item.text"
      :value="item[config.valueField] || item.value"
    >
    </el-option>
  </el-select>
</template>

<script>
export default {
  name: 'NtSelect',
  props: {
    modelValue: {
      default: ''
    },
    config: {
      type: Object,
      default: () => {}
    },
    isClearable: {
      type: Boolean,
      default: false
    },
    commonData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      selectList: []
      // internalValue: ''
    }
  },
  // watch: {
  //   modelValue: {
  //     handler (val) {
  //       debugger
  //       console.log(val)
  //     },
  //     immediate: true
  //   }
  // },
  async mounted() {
    console.log('mounted')
    if (Array.isArray(this.config.selectList)) {
      this.selectList = this.config.selectList
    } else {
      this.selectList = await this.config.selectList(this.commonData)
    }
    // if (this.config.def && this.selectList && this.selectList.length > 0 && this.modelValue === '') {
    //   // this.internalValue =
    //   //   this.selectList[0][this.config.valueField || 'value']
    //   setTimeout(() => {
    //     this.$emit('update:modelValue', this.selectList[0][this.config.valueField || 'value'])
    //   }, 200)
    //   // console.log(this.selectList[0][this.config.valueField || 'value'])
    //   // nextTick(() => {
    //   //   this.$emit('update:modelValue', this.selectList[0][this.config.valueField || 'value'])
    //   // })
    // }
  },
  methods: {
    change(val) {
      this.$emit('update:modelValue', val)
      // this.$emit('select')
      this.$forceUpdate()
    }
  },
  beforeDestroy() {
    this.$emit('delete', this.config.prop)
  }
}
</script>

<style lang="scss" scoped></style>
